.compassClockContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .compassClockMain {
        width: 600px;
        height: 750px;
        color: #fff;
        position: relative;
        span {
            display: block;
            width: 100%;
        }
        .year {
            width: 154px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -77px;
            margin-top: -10px;
            z-index: 1;
        }
        .hour, .minute, .second {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            //background-color: #e2e2e2;
            transition: transform .3s ease-in-out 0s;
        }
        span {
            width: 100%;
            height: 20px;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -10px;
            text-align: right;
            a {
                display: inline-block;
                width: 60px;
                text-align-last: justify;
            }

        }
        .minute {
            width: 480px;
            height: 480px;
            margin-top: -240px;
            margin-left: -240px;
            span a {
                width: 60px;
            }
        }
        .second {
            width: 660px;
            height: 660px;
            margin-top: -330px;
            margin-left: -330px;
            span a {
                width: 60px;
            }
        }
        .hour {

        }
        .minute {

        }
        .second {
            //animation: seconds 60s linear infinite;
        }
        .pointer {
            width: 335px;
            height: 1px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: 9px;
        }
        .pointer::after {
            content: "";
            display: block;
            width: 7px;
            height: 7px;
            position: absolute;
            top: -3px;
            left: -2px;
            background-color: #fff;
            border-radius: 50%;
        }

    }
}
@keyframes seconds {
    0% {transform:rotate(0deg)}
    100% {transform:rotate(360deg)}
}
